<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body,
		html {
		    width: 100%;
		    height: 100%;
		    display: flex;
			background-color: #222;
		}
		div {
		    position: relative;
		    margin: auto;
		    width: 220px;
		    line-height: 64px;
		    text-align: center;
		    color: #fff;
		    font-size: 20px;
		    border: 2px solid #55557f;;
		    border-radius: 10px;
		    background: #55557f;;
		    transition: all .3s;
		    cursor: pointer;
		    
		    
		}
		
		div:hover {
		    filter: contrast(1.1);
		}
		
		div:active {
		    filter: contrast(0.9);
		}
		
		div::before,
		div::after {
		    content: "";
		    position: absolute;
		    top: -10px;
		    left: -10px;
		    right: -10px;
		    bottom: -10px;
		    border: 2px solid #55557f;
		    transition: all .5s;
		    animation: clippath 3s infinite linear;
		    border-radius: 10px;
		}
		
		div::after {
		    animation: clippath 3s infinite -1.5s linear;
		}
		
		@keyframes clippath {
		    0%,
		    100% {
		        clip-path: inset(0 0 98% 0);
		    }
		    
		    25% {
		        clip-path: inset(0 98% 0 0);
		    }
		    50% {
		        clip-path: inset(98% 0 0 0);
		    }
		    75% {
		        clip-path: inset(0 0 0 98%);
		    }
		}
		
	</style>
	<body>
		<div>苏苏</div>
	</body>
</html>
